<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

</head>
<body>

<div id="app">
    <router-view></router-view>
</div>
<script>
    let com = {
        template: `
          <div>
          这是组件1
          <button @click="goPage">跳转用户界面</button>
          </div>
        `,
        methods: {
            goPage() {
                //通过$router.push跳转组件

                this.$router.push("/com2/id=210")
            }
        }
    }
    let com2 = {
        template: `
        <div>组件2
        <div>这是组件1 传递的参数--->{{$route.query.id}}</div>
        <div>这是组件1 动态传递的参数--->{{$route.params.id}}</div>
</div>`,
    }
    let myRouter = new VueRouter({
        routes: [
            {path: "/com", component: com},
            {path: "/com2/:id", component: com2},
            {path: "/", redirect: "/com"},
        ]
    })
    new Vue({
        el: "#app",
        data: {},
        router: myRouter,
    })
</script>
</body>
</html>